<template>
  <div id="centerDown">
    <div id="baodingMap" class="chart-con"></div>
  </div>
</template>

<script>
import baoding from "@/assets/baoding.json";
export default {
  data() {
    return {};
  },
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.drawManage();
    });
  },
  methods: {
    drawManage() {
      var myChart = this.$echarts.init(document.getElementById("baodingMap"));
      //直接读取json文件的数据,然后加载到echarts中
      this.$echarts.registerMap("保定", baoding); //#2
      let option = {
        visualMap: {
          min: 0,
          max: 10,
          show: false,
          seriesIndex: 0,
          // 颜色
          inRange: {
            color: ["black","red", "black", "green", "yellow", "white"],
          },
        },
        // 底部背景
        geo: {
          show: true,
          aspectScale: 0.75, //长宽比
          zoom: 1.1,
          top: "10%",
          left: "10%",
          map: "保定",
          roam: false,
          itemStyle: {
            normal: {
              areaColor: "rgba(0,0,0,0)",
              shadowColor: "rgba(7,114,204, .8)",
              shadowOffsetX: 5,
              shadowOffsetY: 5,
            },
            emphasis: {
              areaColor: "#00aeef",
            },
          },
        },
        series: [
          {
            name: "保定地图",
            type: "map",
            mapType: "保定", //#3
            aspectScale: 0.75, //长宽比
            zoom: 1.1,
            top: "10%",
            left: "10%",
            itemStyle: {
              normal: {
                label: { show: true },
                color: "red",
                areaColor: "rgba(19,54,162, .5)",
                borderColor: "rgba(0,242,252,.3)",
                borderWidth: 1,
                shadowBlur: 7,
                shadowColor: "#00f2fc",
              },
              emphasis: {
                label: { show: true },
                areaColor: "#4f7fff",
                borderColor: "rgba(0,242,252,.6)",
                borderWidth: 2,
                shadowBlur: 10,
                shadowColor: "#0ff2fc",
              },
            },
            data: [
              { name: "易县", value: 100 },
              { name: "竞秀区", value: 120 },
              { name: "涞水县", value: 150 },
              { name: "涿州市", value: 350 },
              { name: "高碑店市", value: 550 },
              { name: "容城", value: 650 },
              { name: "定兴县", value: 750 },
              { name: "阜平县", value: 1050 },
              { name: "曲阳县", value: 2750 },
              { name: "定州市", value: 3750 },
              { name: "安国市", value: 5750 },
            ], //#4
            nameMap: { 保定市: "保定" }, //#5
          },
        ],
      };
      myChart.setOption(option);

      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#centerDown {
  height: 66vh;
  width: 100%;
  padding: 0.2vh 0.2vw;
  padding-top: 0.1vh;
  border-radius: 5px;
  .chart-con {
    height: 64vh;
  }
}
</style>
